<template>
    <div class="home">
        <div class="background" v-if="!rdListView">
            <ol class="list_con">
                <li class="item_con" v-bind:key="i" v-for="(item,i) in rdList">
                    <div class="top">
                        {{item.name}}
                    </div>
                    <div class="bottom">
                        <div class="itemWarp">
                            <div class="label">报名时间：</div>
                            <div class="textInfo">{{item.realTime}}</div>
                        </div>
                        <div class="itemWarp">
                            <div class="label">开始时间：</div>
                            <div class="textInfo">{{item.startTime}}<span>至</span>{{item.endTime}}</div>
                        </div>
                        <div class="itemWarp">
                            <div class="label">集合点：</div>
                            <div class="textInfo">{{item.gatherPlaceName}}</div>
                        </div>
                    </div>
                </li>
       
            </ol>
        </div>
        <infinite-loading @infinite="loadMore" v-if="isLoadMore&&!rdListView">
            <span slot="no-more" style="color:#ccc">
             无更多报名记录！
            </span>
        </infinite-loading>
        <div class="noSign" v-if="rdListView">
            <div>
                <div class="pic">
                    <img src="../../assets/img/defultPage/noData.png">
                </div>
                <div class="noSignTxt">
                    您还没有报名记录哦
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import api from "@/api/index";
    import { Toast } from 'mint-ui';
    import axios from 'axios';
    export default {
        name: "enrollRecord",
        components: {
            InfiniteLoading
        },
        created() {
            this.getInitRdList()
        },
        methods: {
            getInitRdList(){
                this.getRecordList1();
            },
            loadMore($state){
                this.getRecordList3($state)
            },
            getRecordList1($state){
                let param={
                    token:this.token,
                    type:1
                }

                api.recordList(param).then(res => {
                    if (res.msgCode == "000") {
                        this.rdList=this.rdList.concat(res.data.list)
                        this.getRecordList2();
                    } else {
                        Toast({
                            message: '网络错误',
                            position: 'middle',
                            duration: 5000
                        });
                    }
                });
            },
            getRecordList2($state){
                let param={
                    token:this.token,
                    type:2
                }
                api.recordList(param).then(res => {
                    if (res.msgCode == "000") {
                        this.rdList=this.rdList.concat(res.data.list)
                        this.isLoadMore = true
                    } else {
                        Toast({
                            message: '网络错误',
                            position: 'middle',
                            duration: 5000
                        });
                    }
                });
            },

            getRecordList3($state){
                let param={
                    token:this.token,
                    type:3
                }
                if($state){
                    param.pageSize=this.pageSize
                    param.page=this.page
                }
                api.recordList(param).then(res => {
                    if (res.msgCode == "000") {
                        this.rdList=this.rdList.concat(res.data.list)
                        console.log( this.rdList)
                        if(res.data.hasNextPage){
                            $state.loaded();
                            this.page++;
                        }else{
                            $state.loaded();
                            $state.complete();
                        }
                        if(this.rdList.length==0){
                            this.rdListView=true;
                            return
                        }else {
                            this.rdListView=false;
                        }
                    } else {
                        Toast({
                            message: '网络错误',
                            position: 'middle',
                            duration: 5000
                        });
                    }
                });
            }
        },
        data() {
            return {
                rdList:[],
                token: localStorage.getItem("Token"),
                //
                page:1,
                pageSize:5,
                rdListView:false,
                isLoadMore:false
            };
        },
    };
</script>
<style  scoped>
    .noSign{
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        flex-wrap: wrap;
    }
    .noSign .pic{
        width: 160px;
        height: 160px;
        vertical-align: middle;
    }
    .noSign .noSignTxt{
        font-size: 14px;
        text-align: center;
        padding-top: 5px;
        color: #999999;
    }
    .background{
        /* min-height: 100vh; */
        margin-left: 16px;
        margin-right: 16px;
        padding-bottom: 10px;
    }
    .list_con .item_con{
        margin-top: 10px;
        	box-shadow: 0px 2px 8px 0px 
		rgba(31, 28, 92, 0.05);
        padding: 12px 16px;
    }
    .top{
        font-size: 14px;
        font-weight: bolder;
        text-overflow:ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-bottom: 7px;
        line-height: 1.5;
        border-bottom: 1px solid #eee;
    }
    .bottom{
        width: auto;
        margin-top:5.5px ;
    }
    .bottom .itemWarp{
        display: -webkit-box;
        -webkit-box-align: center;
        padding: 5px 0;
        color: #333;
        font-size: 12px;
    }
    .bottom .itemWarp .label{
        width: 60px;
    }
    .bottom .itemWarp .textInfo{
       -webkit-box-flex: 1;
        padding-left: 8px;
        
    }
    .bottom .itemWarp .textInfo span{
            padding: 0 5px;
        }
    .infinite-loading-container{
        font-size: 13px;
        padding: 10px;
    }
</style>